<template>
  <div class="flex items-center justify-center">
    <el-button class="w-20 mt-1 h-[36px]" type="primary" @click="hanldeExportData(1)">返回</el-button>
    <el-button class="w-40 mt-1 h-[36px]" type="primary" @click="hanldeExportData(2)">提交</el-button>
    <selectShowInfo class="ml-16" v-if="graph" :graph="graph" name="canvasDrawer" />
  </div>

  <div class="mapBoard">
    <div class="mapBoard-center">
      <div
        class="canvasBoard"
        ref="graphRef"
        id="container"
        :style="{ transform: `rotate(${rotationSpin}deg)`, cursor: cursorMouse }"
      ></div>
      <control class="controls" name="drawingBoard" @horizontal="horizontalClick" />
      <!-- 画布大小 -->
      <div class="canvasSizes">
        <div class="textSize">高 : {{ heightGraph }}px * 0.05 m</div>
        <div class="textSize ml-6">宽 : {{ widthGraph }}px * 0.05 m</div>
      </div>
    </div>
    <div class="mapBoard-right">
      <canvasToolbar @handle-tool="toolsChange" />
    </div>
  </div>
  <dialogNodeAndEdge ref="nodeAndEdgeRef" />
  <dialogArea ref="areaRef" />
</template>

<script setup lang="ts">
import { ref, useTemplateRef } from "vue";
import { Cell, Graph, Shape } from "@antv/x6";
import { graph, domContainer, uninstall, lineMode, widthGraph, heightGraph } from "./components/mapNode";
import control from "@/components/control/index.vue";
import { enableAuxiliaryFeatures, disableAuxiliaryFeatures, stopDrawEdgeAndNode } from "@/utils/antvx6/nodeOrEdge";
import { realTimeCoordinates } from "@/utils/antvx6/realTimeCoordinate";
import canvasToolbar from "./components/canvasToolbar.vue";
import { addNodes } from "@/utils/antvx6/node";
import { drawLine } from "@/utils/antvx6/drawPath";
import { alignNodes } from "@/utils/antvx6/alignNodes";
import { extractGraphData } from "@/utils/antvx6/extractNodesAndEdges";
import useDrawingBoard from "@/store/modules/drawingBoard";
import dialogNodeAndEdge from "@/components/dialogNodeAndEdge/index.vue";
import dialogArea from "@/components/dialogArea/index.vue";
import { useStorage } from "@vueuse/core";
import { useRouter } from "vue-router";
import selectShowInfo from "@/components/selectShowInfo/index.vue";
import { drawArea } from "@/utils/antvx6/drawArea";
const router = useRouter();
const drawingBoardStore = useDrawingBoard();
const nodeAndEdgeRef = useTemplateRef<any>("nodeAndEdgeRef");
const areaRef = useTemplateRef<any>("areaRef");
onMounted(() => {
  let container = document.getElementById("container") as HTMLElement | undefined;
  domContainer(container, nodeAndEdgeRef.value, areaRef.value);
});
onUnmounted(() => {
  uninstall();
});
// 画布旋转
const rotationSpin = ref<number>(0);
// 光标
const cursorMouse = ref<string>("");
// 区分是否可编辑
const disabledInteracting = ref<boolean>(false);
// 工具事件
const horizontalClick = (_e: any) => {
  const _type: string = _e.type;
  const containers: any = document.getElementById("container");
  switch (_type) {
    case "gesture": // 手势
      stopDrawEdgeAndNode(graph.value);
      cursorMouse.value = "grabbing";
      realTimeCoordinates(graph.value, containers, false);
      // disableAuxiliaryFeatures(graph.value);
      // 取消连接桩磁体
      const nodeList = graph.value.getNodes().filter((item: Cell) => item.shape === "node-point");
      nodeList.forEach((item: Cell) => item.prop("isShowPortMagnet", false));
      break;
    case "connect": // 连线
    case "connect2": // 连线
      if (disabledInteracting.value) return;
      lineMode.value = _type === "connect" ? 1 : 2;
      graph.value.cleanSelection();
      enableAuxiliaryFeatures(graph.value);
      break;
    case "enabled":
      realTimeCoordinates(graph.value, containers, true);
      break;
    case "zoomIn": // 放大
      graph.value.zoom(0.04);
      break;
    case "zoomOut": // 缩小
      graph.value.zoom(-0.04);
      break;
    case "prompt": // 提示消息
      break;
    case "rotateRight": // 旋转Right
      if (graph.value) {
        rotationSpin.value += 1;
      }
      break;
    case "rotateLeft": // 旋转Left
      if (graph.value) {
        rotationSpin.value -= 1;
      }
      break;
    case "positioning": // 定位中心点
      graph.value.zoomTo(1.5); // 画布和图形整体的缩放
      graph.value.positionPoint({ x: 0, y: 0 }, "0%", "0%");
      rotationSpin.value = 0;
      break;
    // case "revoke": // 撤销
    //   undoFun();
    //   break;
    // case "restore": // 重置
    //   redoFun();
    //   break;
    case "alignLeft":
    case "alignRight":
    case "alignTop":
    case "alignBottom":
    case "alignAngleX":
    case "alignAngleY":
      alignNodes(drawingBoardStore.nodeSelectedList, _type);
      break;
    default:
      break;
  }
};
// 绘制工具事件
const toolsChange = (_type: string) => {
  stopDrawEdgeAndNode(graph.value);
  switch (_type) {
    case "node": // 绘制节点
      addNodes(graph.value, 2000, 2000);
      cursorMouse.value = "cell";
      break;
    case "lineMode1": // 绘制单行直线
    case "lineMode2": // 绘制双行直线
      lineMode.value = _type === "lineMode1" ? 1 : 2;
      let container = document.getElementById("container") as HTMLElement | undefined;
      drawLine(graph.value, container, widthGraph.value, heightGraph.value, lineMode.value);
      cursorMouse.value = "copy";
      graph.value.cleanSelection();
      break;
    case "bezier": // 绘制贝塞尔曲线
      // drawBezierCurve(graph.value, props.mapObj?.map_id, widthGraph.value, heightGraph.value);
      cursorMouse.value = "alias";
      break;
    case "area": // 绘制功能区
      drawArea(graph.value);
      cursorMouse.value = "pointer";
      break;
    case "wall": // 绘制墙
      break;
    case "door": // 绘制门
      break;
    case "column": // 绘制柱子
      break;
    case "eraser": // 橡皮擦
      break;
    default:
      break;
  }
};
// 提交
const extractGraphObj = useStorage("extractGraphObj", {});
const hanldeExportData = (_type: number) => {
  if (_type === 1) {
    router.go(-1);
  } else {
    const data: any = extractGraphData(graph.value);
    extractGraphObj.value = data;
    ElMessage.success("保存成功");
  }
};
</script>
<style scoped lang="scss">
.mapBoard {
  width: 100%;
  height: calc(100% - 100px);
  padding: 5px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  &-center {
    width: 80vw;
    height: 100%;
    overflow: hidden;
    background: #262626;
    position: relative;
    .canvasBoard {
      width: 100%;
      height: 100%;
    }
    .canvasSizes {
      position: absolute;
      bottom: 10px;
      left: 30px;
      z-index: 20;
      display: flex;
      .textSize {
        color: rgba($color: #a5a4a4, $alpha: 0.2);
        font-size: 28px;
        font-weight: 400;
      }
    }
    .controls {
      position: absolute;
      top: 80px;
      right: 18px;
      z-index: 20;
      background: #555a61;
      max-height: 85%;
      overflow-y: auto;
      box-shadow: 1px -1px 16px 4px rgba(0, 0, 0, 0.25);
    }
  }
  &-right {
    width: 20vw;
    height: 100%;
  }
}
</style>
